<template>
  <div>
    <h3>收货地址管理</h3>
    <!-- <van-button type="danger">危险按钮</van-button> -->
    <!-- <van-area area-list="{{ areaList }}" ></van-area> -->
    <el-table :data="tableData" height="400" border style="width: 100%">
      <!-- <el-table-column prop="id" label="序号" width="180" align="center">
      </el-table-column> -->
      <el-table-column prop="address" label="收货地址" align="center">
      </el-table-column>
      <el-table-column prop="user_name" label="用户" align="center">
      </el-table-column>
      <el-table-column prop="" label="操作" align="center">
        <template #default="scope">
          <!-- <el-button type="primary" @click="upd(scope.row.id)">修改</el-button> -->
          <el-button type="primary" @click="shopp(scope.row.id)"
            >管理收货地址</el-button
          >
           <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="地址序号" prop="id" class="aa">
          <el-input type="username" v-model="address.id"></el-input>
        </el-form-item>
        <el-form-item label="地址" class="aa">
          <el-input autocomplete="off" v-model="address.address"></el-input>
        </el-form-item>
        <el-form-item label="用户" class="aa">
          <el-input
            :disabled="true"
            type="username"
            v-model="address.user_name"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="udd">确定修改</el-button>
      </div>
    </el-dialog>
    <!-- {{uid}} -->
    <el-button type="primary" @click="addres">添加收货地址</el-button>
    <el-dialog title="添加信息" :visible.sync="dialog">
      <el-form>
        <el-form-item label="地址" class="aa">
          <el-input autocomplete="off" v-model="addlist.address"></el-input>
        </el-form-item>
        <el-form-item label="用户" class="aa">
          <el-input type="username" :disabled="true" v-model="addlist.user_name"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="addresslist">确定添加</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Axios from "axios";
export default {
  name: "",
  data() {
    return {
      //   uid: "",
      tableData: [],
      dialogFormVisible: false,
      dialog: false,
      address: {
        id: 0,
        address: "",
        user_name: "",
      },
      addlist: {
        address: "",
        user_name:'',
      },
      uid:'',
    };
  },
  props: {},

  components: {},

  created() {},

  mounted() {
    // 获取所有用户
    Axios.get("http://127.0.0.1:8000/user/userinfo/").then(res=>{
      console.log(res)
    })

    // 获取当前登录的用户
    Axios.get("http://127.0.0.1:8000/user/infolist/", {
      headers: { token: localStorage.getItem("token") || "" },
    }).then((res) => {
      this.uid = res.data.userinfo.id;
      this.addlist.user_name = res.data.userinfo.username
      console.log("获取登录用户的信息>>", res);
    });
    // 获取该用户的所有收货地址
    Axios.get("http://127.0.0.1:8000/user/address/", {
      headers: { token: localStorage.getItem("token") || "" },
    }).then((res) => {
      console.log("获取用户的收货地址>>", res);
      this.tableData = res.data.data;
    });
  },

  methods: {
    shopp(id) {
      this.dialogFormVisible = true;
      Axios.get("http://127.0.0.1:8000/user/address/" + id + "/").then(
        (res) => {
          console.log("获取单个收货地址", res);
          this.address = res.data;
        }
      );
    },
    udd() {
      this.dialogFormVisible = false;
      Axios.put(
        "http://127.0.0.1:8000/user/address/" + this.address.id + "/",
        this.address
      ).then((res) => {
        console.log("修改收货地址》》", res);
        if (res.status == 200) {
          this.$notify({
            title: "成功",
            message: "修改成功！",
            type: "success",
          });
        } else {
          this.$notify.error({
            title: "错误",
            message: res.statusText,
          });
        }
        Axios.get("http://127.0.0.1:8000/user/address/", {
          headers: { token: localStorage.getItem("token") || "" },
        }).then((res) => {
          console.log("获取用户的收货地址>>", res);
          this.tableData = res.data.data;
        });
      });
    },
    addres() {
      this.dialog = true;
    },
    // 添加收货地址
    addresslist() {
      this.dialog = false;
      Axios.post("http://127.0.0.1:8000/user/address/", {
        address:this.addlist.address,
        uid:this.uid
      }
      ).then(
        (res) => {
          console.log("添加收货地址的响应>>", res);
          if (res.status == 200) {
            this.$notify({
              title: "成功",
              message: "添加成功！",
              type: "success",
            });
          } else {
            this.$notify.error({
              title: "错误",
              message: res.statusText,
            });
          }
          Axios.get("http://127.0.0.1:8000/user/address/", {
            headers: { token: localStorage.getItem("token") || "" },
          }).then((res) => {
            console.log("获取用户的收货地址>>", res);
            this.tableData = res.data.data;
          });
        }
      );
    },
    del(id) {
      this.dialog = false;
      Axios.delete("http://127.0.0.1:8000/user/address/"+id+'/').then(
        (res) => {
          console.log("删除收货地址的响应>>", res);
          if (res.status == 204) {
            this.$notify({
              title: "成功",
              message: "删除成功！",
              type: "success",
            });
          } else {
            this.$notify.error({
              title: "错误",
              message: res.statusText,
            });
          }
          Axios.get("http://127.0.0.1:8000/user/address/", {
            headers: { token: localStorage.getItem("token") || "" },
          }).then((res) => {
            console.log("获取用户的收货地址>>", res);
            this.tableData = res.data.data;
          });
        }
      );
    },
  },

  computed: {},

  watch: {},

  directives: {},

  filters: {},
};
</script>

<style>
* {
  margin: 0;
}
</style>
